<template>
  <div>
    <Banner></Banner>
    <article class="part2">
      <div class="p2-img"></div>
      <Title subcolor="#efefef">
        <template slot="title">欢迎光临柳州螺蛳粉</template>
        <template slot="subtitle">Welcome to Luosifen</template>
      </Title>
      <section>
        <p>
          螺蛳粉是广西壮族自治区柳州市的小吃米粉，具有辣、爽、鲜、酸、烫的独特风味。是柳州最具地方特色的名小吃。螺蛳粉的味美还因为它有着独特的汤料。汤料由螺蛳、山奈、八角、肉桂、丁香、多种辣椒、等天然香料和味素配制而成。
        </p>
        <p>
          螺蛳粉最早出现于20世纪70年代末，虽然历史较短，但嗍螺和米粉在柳州传承悠久。在柳州从事40多年文物考古工作的刘文认为，从一个小的方面来说，柳州的历史文化发展轨迹就是一段采集食用螺蛳的历史。2008年，柳州螺蛳粉手工制作技艺成功申报自治区第二批非物质文化遗产名录。
        </p>
        <p>
          螺蛳粉除了鲜、酸、爽、烫，辣味也是它的独特之处。它由柳州特有的软韧爽口的米粉，加上酸笋、花生、油炸腐竹、黄花菜、萝卜干、鲜嫩青菜等配料及浓郁适度的酸辣味和煮烂螺蛳的汤水调合而成，因有奇特鲜美的螺蛳汤，使人吃一想二。未尝其味先观其色便会令人垂涎欲滴，红通通的是漂浮在上面的一层辣椒油，绿油油的是时令青菜，鲜美的螺蛳汤渗透每一根粉条，螺蛳粉中的辣椒油与普通的辣不同，此种带着有侵略性的辣，嫩滑香酥得让人忘了本位。
        </p>
      </section>
    </article>
    <section class="part3">
      <Title subcolor="#efefef">
        <template slot="title">中国的八大菜系</template>
        <template slot="subtitle">The 8 Chinese cuisines</template>
      </Title>
      <p>
        中国传统餐饮文化历史悠久，菜肴在烹饪中有许多流派。在清代形成鲁、川、粤、苏四大菜系（根据徐珂所辑《清稗类钞》中的排序，下同），后来，闽、浙、湘、徽等地方菜也逐渐出名，于是形成了中国的“八大菜系”，即鲁菜、川菜、粤菜、苏菜、闽菜、浙菜、湘菜、徽菜。中国人发明了炒(爆、熘)、烧(焖、煨、烩、卤)、煎(溻、贴)、炸(烹)、煮(氽、炖、煲)、蒸、烤(腌、熏、风干)、凉拌、淋等烹饪方式，又向其他民族学习了扒、涮等方式，用来制作各种菜肴。
      </p>
      <div class="bubble">
        <Figure
          v-for="(item, index) in figure"
          :key="index"
          :src="item.src"
          :alt="item.name"
          >{{ item.name }}</Figure
        >
      </div>
    </section>
    <Footer></Footer>
  </div>
</template>

<script>
import Banner from "../Banner.vue";
import Title from "../Title.vue";
import Figure from "../Figure.vue";
import Footer from "../Footer.vue";

export default {
  data() {
    return {
      figure: [
        { name: "川菜", src: require("../../assets/chuan.png") },
        { name: "徽菜", src: require("../../assets/hui.png") },
        { name: "鲁菜", src: require("../../assets/lu.png") },
        { name: "闽菜", src: require("../../assets/min.png") },
        { name: "苏菜", src: require("../../assets/su.png") },
        { name: "湘菜", src: require("../../assets/xiang.png") },
        { name: "粤菜", src: require("../../assets/yue.png") },
        { name: "浙菜", src: require("../../assets/zhe.png") },
      ],
    };
  },
  components: {
    Banner,
    Title,
    Figure,
    Footer,
  },
};
</script>

<style lang="less" scoped>
.part2 {
  max-width: 1000px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-template-rows: 1fr 3fr;
  grid-gap: 20px 30px;
  grid-template-areas:
    "img title"
    "img article";

  & > * {
    display: block;
  }

  .p2-img {
    grid-area: img;
    background: url(../../assets/luosifen.jpg) no-repeat center center / cover;
    box-shadow: -20px 20px 0 0 #efefef;
  }
  #title {
    grid-area: title;
  }
  section {
    grid-area: article;
    text-indent: 2em;
    text-align: justify;
    column-count: 2;
    column-gap: 30px;
  }
}
.part3 {
  max-width: 1000px;
  margin: 50px auto;
  p {
    position: relative;
    margin: 35px 0;
    text-indent: 2em;
    &::before,
    &::after {
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      padding-top: 13px;
      box-sizing: border-box;
      color: #fff;
      font-size: 50px;
      display: block;
      width: 60px;
      height: 60px;
      background-color: #cdcdcd;
      border-radius: 50%;
      font-family: "SimSun";
      font-weight: bold;
    }
    &::before {
      content: "“";
      text-indent: -1px;
      left: -80px;
    }
    &::after {
      content: "”";
      text-indent: 14px;
      right: -80px;
    }
  }
  .bubble {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 50px;
  }
}
</style>